<template>
	<view class="container">
		<view class="profile-content">
			<view class="record-section">
				<view :class="['record-btn', isRecording ? 'recording' : '']" @click="handleRecordClick">
					<text class="record-text">{{ isRecording ? '记录中' : '开始记录' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ProfilePage',
		data() {
			return {
				currentUserId: '1',
				isRecording: false
			}
		},
		computed: {
			nextUserId() {
				return this.currentUserId === '1' ? '2' : '1';
			}
		},
		onShow() {
			const savedId = uni.getStorageSync('userId');
			if (savedId) {
				this.currentUserId = savedId;
			}
		},
		methods: {
			async handleRecordClick() {
				if (!this.isRecording) {
					this.isRecording = true;
					await this.switchUserId();
					this.goToDebug();
				} else {
					this.isRecording = false;
				}
			},
			switchUserId() {
				this.currentUserId = this.nextUserId;
				uni.setStorageSync('userId', this.currentUserId);
				uni.showToast({
					title: `ID已切换为: ${this.currentUserId}`,
					icon: 'none',
					duration: 2000
				});
			},
			goToDebug() {
				uni.navigateTo({
					url: '/pages/monitor/debug'
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		height: 100vh;
		background-color: #f8f8f8;
		/* 保证页面水平垂直居中 */
		justify-content: center;
	}

	.profile-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.record-section {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 60rpx;
	}

	/* 调整按钮尺寸 */
	.record-btn {
		/* 放大后的宽高 */
		width: 280rpx;
		height: 280rpx;
		border-radius: 140rpx;
		/* 保持圆形，值为宽高的一半 */
		background-color: #007AFF;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.2);
		transition: background-color 0.3s;
	}

	.record-btn.recording {
		background-color: #34C759;
		box-shadow: 0 4rpx 16rpx rgba(52, 199, 89, 0.2);
	}

	.record-text {
		color: #fff;
		font-size: 36rpx;
		/* 文字同步放大 */
		font-weight: bold;
	}
</style>